<style lang="less">
  header {
    // position: relative;
    // width: 100%;
    display: flex;
    justify-content: space-between;
    height: 70px;
    font-size: 16px;
    background-color: #f73b42;
    padding-right:30px;
    .lt {
      display: flex;
      align-items: center;
      .collapse-btn {
        width: 64px;
        cursor: pointer;
        text-align: center;
        i {
          font-size: 30px;
          color: #fff;
        }
      }
      .logo {
        height: 26px;
        margin-right: 20px;
      }
      .menu {
        height: 100%;
        display: flex;
      }
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 14px;
        min-width: 100px;
        text-decoration: none;
        color: #fff;
        &.hover {
          background: #e23037;
        }
      }
    }
    .rt {
      display: flex;
      align-items: center;
      .user-con {
        display: flex; // height: 70px;
        align-items: center;
      }
    }
    .btn-fullscreen {
      transform: rotate(45deg);
      margin-right: 5px;
      font-size: 24px;
    }
    .btn-bell,
    .btn-fullscreen {
      position: relative;
      width: 30px;
      height: 30px;
      text-align: center;
      border-radius: 15px;
      cursor: pointer;
    }
    .btn-bell-badge {
      position: absolute;
      right: 0;
      top: -2px;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background: #f56c6c;
      color: #fff;
    }
    .btn-bell .el-icon-bell {
      color: #fff;
    }
    .user-name {
      margin-left: 10px;
    }
    .user-avator {
      margin-left: 20px;
      img {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .el-dropdown-link {
      color: #fff;
      cursor: pointer;
    }
    .el-dropdown-menu__item {
      text-align: center;
    }
  }
</style>
<template>
  <header>
    <div class="lt">
      <div class="collapse-btn" @click="collapseChange">
        <i v-if="!collapse" class="el-icon-s-fold" />
        <i v-else class="el-icon-s-unfold" />
      </div>

      <img class="logo" src="/images/logo.png" alt="">

      <div class="menu">
        <router-link v-for="(item,index) in routes" :key="index" :to="item.path" class="menu-item" :class="{hover:rootRoute===item.path}">{{ item.meta.name }}</router-link>
      </div>
    </div>
    <div class="rt">
      <div class="user-con">
        <!-- 全屏显示 -->
        <div class="btn-fullscreen" @click="handleFullScreen">
          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
            <i class="el-icon-rank" />
          </el-tooltip>
        </div>
        <!-- 消息中心 -->
        <div class="btn-bell">
          <el-tooltip effect="dark" :content="message ? `有${message}条未读信息` : `消息中心`" placement="bottom">
            <router-link to="tabs">
              <i class="el-icon-bell" />
            </router-link>
          </el-tooltip>
          <span v-if="message" class="btn-bell-badge" />
        </div>
        <!-- 用户头像 -->
        <div class="user-avator">
          <img src="../../assets/img/img.jpg">
        </div>
        <!-- 用户下拉菜单 -->
        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            超级管理员
            <i class="el-icon-caret-bottom" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item divided command="loginout">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>
<script>
import bus from '@/bus'
export default {
  data() {
    return {
      collapse: false,
      fullscreen: false,
      message: 2
    }
  },
  computed: {
    routes() {
      return this.$router.options.routes.filter(item => !item.meta.hidden)
    },
    rootRoute() {
      return this.$route.matched[0].path || '/'
    }
  },
  mounted() {
    console.log('-----com-Header mounted -----', this.$route)
    if (document.body.clientWidth < 1500) {
      this.collapseChange()
    }
  },
  methods: {
    // 用户名下拉惨淡选择事件
    handleCommand(command) {
      if (command === 'loginout') {
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        this.$router.push('/login')
      }
    },
    // 侧边栏折叠
    collapseChange() {
      this.collapse = !this.collapse
      bus.$emit('collapse', this.collapse)
    },
    // 全屏事件
    handleFullScreen() {
      const element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>
